<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>pwa版旅游站点</title>
    <link rel="manifest" href="./manifest.json" />
    <meta name="Keywords" content="pwa版旅游站点,景区门票,旅游度假" />
    <meta
      content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"
      name="viewport"
    />
    <meta
      name="baidu-tc-cerfication"
      content="70e91d9156558b74286c45bf640cff9e"
    />
    <meta name="apple-mobile-web-app-status-bar-style" content="blank" />
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />
    <!--请求id-->
    <meta name="_reqId" content="5f74b3d0-cdc3-11e7-8d2f-192a0bf997cd" />
    <link
      rel="alternate"
      type="application/vnd.wap.xhtml+xml"
      media="handheld"
      href="target"
    />
    <link rel="stylesheet" href="./styles/demo.css" />
    <style type="text/css">
      *,
      button,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul {
        margin: 0;
        padding: 0;
      }
      button,
      input:focus {
        outline: 0;
      }
      #content,
      body {
        max-width: 640px;
        width: 100%;
        overflow-x: hidden;
      }
      .swipe,
      body,
      html {
        height: 100%;
      }
      .guangg,
      .guangg:after,
      .myself a,
      .myself span,
      img,
      ul li {
        display: block;
      }
      .bd,
      .top-module li:nth-child(2) .img-wrap {
        border-image: url()
          2 stretch;
      }
      .activeTitle .scroll-bar2 ul li p,
      .tablist .msg p.bewrite,
      .tablist .msg p.name_tit {
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .activeTitle span:nth-of-type(2):before,
      .activeTitle:before,
      .address span:after,
      .guangg:after,
      .limitGetMore:before,
      .more_recommend .plate .title:before,
      .phoneTitle span:before,
      .search p:before {
        content: "";
      }
      * {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
      }
      img {
        width: 100%;
      }
      button,
      input {
        border: none;
        border-radius: 0;
      }
      html {
        font-family: "microsoft yahei", Arial;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        width: 100%;
        font-size: 62.5%;
      }
      body {
        min-width: 320px;
        background: #efeff7;
        margin: 0 auto !important;
      }
      a {
        text-decoration: none;
        color: #fff;
        tap-highlight-color: transparent;
        focus-ring-color: transparent;
        -webkit-tap-highlight-color: transparent;
        -webkit-focus-ring-color: transparent;
      }
      ul li {
        list-style: none;
      }
      i {
        font-style: normal;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: #333;
        font-weight: 100;
      }
      button {
        border: 0;
      }
      li,
      select,
      span {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
      }
      #content {
        margin: 0 auto;
      }
      .swiper-slide {
        overflow: hidden;
        background: 0 0;
        visibility: visible;
      }
      .bd {
        border-width: 0;
        border-style: solid;
      }
      .swipe .pagination {
        line-height: 7px;
      }
      .index-header {
        height: 45px;
        padding: 7px 10px;
        overflow: hidden;
        background-color: #fff;
      }
      .address {
        float: left;
        width: 17%;
        margin-top: 5px;
        margin-right: 2%;
      }
      .address span {
        font-size: 14px;
        color: #d30775;
        position: relative;
      }
      .address span:after {
        width: 5px;
        height: 5px;
        border-top: 1px solid #d30775;
        border-right: 1px solid #d30775;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        position: absolute;
        top: 5px;
        right: -12px;
      }
      .search {
        border: 1px solid #dcdcdc;
        border-radius: 2px;
        float: left;
        width: 72%;
        height: 30px;
        line-height: 28px;
      }
      .custom-module,
      .phoneTitle,
      .top-module {
        border-bottom-width: 1px;
      }
      .bottom-module li:last-child,
      .more_recommend .plate ul li:nth-child(3n),
      .mp-vip ul li:nth-child(2n) {
        border-right-color: transparent;
      }
      .search p {
        color: #aaa;
        font-size: 15px;
        width: 100%;
        padding-left: 35px;
        position: relative;
        height: 30px;
        overflow: hidden;
      }
      .search p:before {
        background: url(./images/fangdajing.png) no-repeat;
        width: 15px;
        height: 15px;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        position: absolute;
        left: 12px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }
      .myself {
        float: right;
        width: 9%;
        margin-top: 4px;
      }
      .myself a {
        width: 100%;
        height: 30px;
      }
      .myself span {
        background: url(./images/pp.png) no-repeat;
        width: 21px;
        height: 22px;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        float: right;
      }
      .banner .img-wrap {
        padding-bottom: 19.9677%;
      }
      .pro-module .img-wrap {
        padding-bottom: 36%;
        background-size: 150px 150px !important;
        position: relative;
        overflow: hidden;
      }
      .pro-module .img-wrap img {
        min-height: 100px;
        opacity: 0;
        transform: scale(1.4);
        -webkit-transform: scale(1.4);
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
      }
      .branch-huichang a,
      .guangg,
      .main-huichang a {
        position: relative;
      }
      .top-module li:first-child .img-wrap {
        padding-bottom: 73.59%;
      }
      .top-module li .img-wrap {
        padding-bottom: 36.92%;
      }
      .bottom-module li .img-wrap {
        padding-bottom: 54%;
      }
      .mp-vip ul li .img-wrap {
        padding-bottom: 37%;
      }
      .qianggou .hot-activity ul li .img-wrap {
        padding-bottom: 38.93%;
      }
      .branch-huichang.show2,
      .branch-huichang.show3 {
        padding: 10px 15px;
        overflow: hidden;
      }
      .branch-huichang.show2 img {
        float: left;
        width: 49%;
        margin-right: 2%;
      }
      .branch-huichang.show2 a:last-child img {
        margin-right: 0;
      }
      .branch-huichang.show3 img {
        float: left;
        width: 25%;
      }
      .phoneTitle i,
      .phoneTitle span {
        display: inline-block;
        vertical-align: middle;
      }
      .mp-vip {
        background: #fff;
        overflow: hidden;
        margin-top: 5px;
      }
      .mp-vip ul li {
        float: left;
        width: 50%;
        border-right-width: 1px;
        border-top-width: 1px;
      }
      .phoneTitle {
        height: 47px;
        line-height: 47px;
        background-color: #fff;
        color: #589adc;
        text-align: center;
        font-size: 15px;
        position: relative;
      }
      .phoneTitle span {
        position: relative;
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background: #ddd;
        margin-right: 8px;
        color: #666;
      }
      .phoneTitle span:before {
        width: 53px;
        height: 1px;
        display: block;
        position: absolute;
        transform: translateY(-50%);
        background: #ddd;
        top: 50%;
      }
      .phoneLineLeft:before {
        -webkit-transform: translateY(-50%);
        right: 8px;
      }
      .phoneTitle span.phoneLineRight {
        margin-right: 0;
        margin-left: 8px;
      }
      .phoneLineRight:before {
        -webkit-transform: translateY(-50%);
        left: 8px;
      }
      .custom-module {
        border-top-width: 1px;
        background: #fff;
        margin-top: 5px;
      }
      .top-module {
        width: 100%;
        overflow: hidden;
      }
      .top-module li {
        float: left;
        width: 50%;
      }
      .top-module li:nth-child(2) {
        border-left-width: 1px;
        border-bottom-width: 1px;
      }
      .top-module li:nth-child(2) .img-wrap {
        border-width: 0 0 1px;
      }
      .hot-activity,
      .index-footer .list,
      .tablist nav {
        border-bottom-width: 1px;
      }
      .top-module li:nth-child(3) {
        border-left-width: 1px;
      }
      .bottom-module {
        width: 100%;
        overflow: hidden;
      }
      .bottom-module li {
        float: left;
        width: 33.33%;
        border-right-width: 1px;
        border-top-width: 1px;
      }
      .qianggou {
        background: #fff;
        margin: 4px 0 0;
        padding-bottom: 10px;
      }
      .custom {
        padding: 10px 10px 0;
      }
      .prd-list {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
      }
      .hot-activity {
        overflow: hidden;
        border-top-width: 1px;
      }
      .hot-activity ul li {
        float: left;
        width: 50%;
      }
      .hot-activity ul li:nth-child(1) {
        border-right-width: 1px;
      }
      .tablist {
        width: 100%;
        overflow: hidden;
        margin-top: 5px;
      }
      .tablist nav {
        height: 44px;
      }
      .tablist nav ul {
        overflow: hidden;
        height: 44px;
        line-height: 44px;
        text-align: center;
        background: #fff;
      }
      .tablist nav ul.navFixed {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
      }
      .tablist nav ul li {
        font-size: 14px;
        width: 25%;
        float: left;
      }
      .tablist .msg {
        padding: 10px;
      }
      .tablist .msg p.name_tit {
        font-size: 14px;
        color: #000;
        overflow: hidden;
      }
      .tablist .msg p.bewrite {
        font-size: 12px;
        color: #666;
        line-height: 16px;
        overflow: hidden;
      }
      .pro-module {
        padding-bottom: 10px;
        background: #fff;
        position: relative;
        z-index: 2;
      }
      .pro-module .mark {
        position: absolute;
        top: 10px;
        left: 10px;
        color: #fff;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.5);
        padding: 0 7px;
      }
      .pro-module .mark i {
        padding: 0 5px;
      }
      .pro-module .price {
        position: absolute;
        right: 0;
        bottom: 10px;
        text-align: center;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        overflow: hidden;
      }
      .pro-module .price p {
        background: #ff720e;
        color: #fff;
        font-size: 12px;
        padding: 5px 10px;
      }
      .pro-module .price p i {
        font-size: 20px;
      }
      .pro-module .price span {
        background: #fff;
        color: #ff720e;
        font-size: 12px;
        display: block;
        line-height: 24px;
        padding: 0 10px;
      }
      .abTestIcon {
        position: absolute;
        width: 49px;
        height: 44px;
        top: 0;
        right: 5px;
        background-size: 49px 44px;
        background-repeat: no-repeat;
        background-position: center center;
      }
      .index-footer {
        text-align: center;
      }
      .index-footer .list {
        overflow: hidden;
        background: #fff;
        height: 43px;
        line-height: 43px;
        font-size: 14px;
        border-top-width: 1px;
      }
      .index-footer .list li {
        float: left;
        width: 25%;
      }
      .index-footer .list li span {
        color: #333;
        border-right-width: 1px;
        display: block;
        height: 27px;
        line-height: 27px;
        margin-top: 8px;
      }
      .index-footer .other {
        font-size: 10px;
        color: #666;
        padding: 9px 0 7px;
      }
      .index-footer .other ul {
        overflow: hidden;
        width: 200px;
        margin: 0 auto;
      }
      .index-footer .other ul li {
        float: left;
        width: 50px;
        border-right-width: 1px;
      }
      .index-footer .other ul li:nth-child(2) {
        color: #333;
      }
      .index-footer .other p {
        margin-top: 5px;
      }
      #container {
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1800;
        transform: translateX(101%);
        -webkit-transform: translateX(101%);
        transition: transform 0.6s;
        display: none;
        -webkit-transition: transform 0.6s;
        background: #f8f8f8;
        overflow-y: auto;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
      }
      #container.moveRight {
        transform: translateX(0);
        -webkit-transform: translateX(0);
      }
      #moreRecommendBack {
        position: absolute;
        width: 28px;
        height: 45px;
        display: block;
        top: 0;
        left: 0;
        z-index: 4;
      }
      .more_recommend .more-header {
        height: 45px;
        padding: 7px 12px;
        border-bottom-width: 1px;
        position: relative;
      }
      .more_recommend .more-header span {
        font-size: 32px;
        display: block;
        position: absolute;
        top: 0;
        width: 35px;
        height: 45px;
        background: url()
          50% no-repeat;
        background-size: 10px;
      }
      .more_recommend .more-header p {
        font-size: 21px;
        text-align: center;
        color: #010101;
        line-height: 32px;
      }
      .more_recommend .plate {
        background: #fff;
        border-top-width: 1px;
        margin-bottom: 10px;
      }
      .more_recommend .plate .title {
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        color: #000;
        padding-left: 15px;
        position: relative;
      }
      .more_recommend .plate .title:before {
        width: 5px;
        height: 45px;
        position: absolute;
        top: 0;
        left: 0;
      }
      .more_recommend .plate .title span.bottom-arrow,
      .more_recommend .plate .title span.top-arrow {
        width: 12px;
        height: 12px;
        border-top: 1px solid #777;
        border-left: 1px solid #777;
        position: absolute;
        right: 15px;
      }
      .more_recommend .plate .title span.bottom-arrow {
        top: 35%;
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
      }
      .more_recommend .plate .title span.top-arrow {
        top: 50%;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
      }
      .more_recommend .plate:nth-of-type(4n + 2) .title:before {
        background: #d30775;
      }
      .more_recommend .plate:nth-of-type(4n + 3) .title:before {
        background: #ff740c;
      }
      .more_recommend .plate:nth-of-type(4n + 4) .title:before {
        background: #7ac72f;
      }
      .more_recommend .plate:nth-of-type(4n + 5) .title:before {
        background: #5698dc;
      }
      .more_recommend .plate ul {
        overflow: hidden;
        border-bottom-width: 0;
        border-top-width: 1px;
        width: 100%;
      }
      .activeTitle,
      .destination,
      .mp-vip .activeTitle {
        border-bottom-width: 1px;
      }
      .more_recommend .plate ul li {
        width: 33.33%;
        float: left;
        border-bottom-width: 1px;
        border-right-width: 1px;
      }
      .more_recommend .plate ul li a {
        height: 0;
        padding-bottom: 37.69%;
        display: block;
      }
      .count,
      .hidden {
        display: none;
      }
      #tab_con article.fdiv,
      .activeTitle:before,
      .img,
      .more_red_point {
        display: block;
      }
      #tab li.active span {
        color: #fff;
        background: #d30775;
        border-radius: 20px;
        padding: 5px 10px;
      }
      .plate > ul {
        overflow: hidden;
      }
      .plate > ul.transition {
        -webkit-transition: 0.5s;
        transition: 0.5s;
      }
      .banner {
        position: relative;
      }
      #mySwipe1 .swipe-wrap img {
        height: auto !important;
      }
      .img {
        width: 100% !important;
        -webkit-transform: none !important;
      }
      .more_red_point {
        background: #c5107b;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        top: 18%;
        right: 8%;
        position: absolute;
        z-index: 1;
      }
      .pagination.pagination1 {
        bottom: 0.5rem;
      }
      .pagination.pagination1 .swiper-pagination-switch {
        width: 7px;
        height: 7px;
        border-radius: 100%;
      }
      .activeTitle {
        height: 30px;
        line-height: 30px;
        position: relative;
        font-size: 12px;
        overflow: hidden;
      }
      .activeTitle span {
        padding-left: 10px;
        color: #666;
      }
      .activeTitle span:nth-of-type(2) {
        font-size: 12px;
        color: #d30775;
        float: right;
        margin-right: 19px;
        position: relative;
      }
      .activeTitle span:nth-of-type(2):before {
        width: 6px;
        height: 6px;
        display: block;
        position: absolute;
        top: 50%;
        right: -7px;
        border-top: 1px solid #d30775;
        border-right: 1px solid #d30775;
        -webkit-transform: translateY(-50%) rotate(45deg);
        transform: translateY(-50%) rotate(45deg);
      }
      .activeTitle:before {
        height: 18px;
        width: 4px;
        position: absolute;
        top: 5px;
        left: 0;
        background: #d30775;
      }
      .activeTitle .scroll-bar2 {
        height: 30px;
        position: absolute;
        top: 0;
        margin-left: 0;
        left: 0;
        padding-left: 78px;
        padding-right: 10px;
        width: 100%;
      }
      .activeTitle .scroll-bar2 ul {
        position: absolute;
        left: 70px;
        top: 0;
      }
      .activeTitle .scroll-bar2 ul li {
        width: 100%;
      }
      .activeTitle .scroll-bar2 ul li p {
        color: #aaa;
        font-size: 11px;
        padding-left: 10px;
        width: 100%;
        overflow: hidden;
      }
      .activeTitle div {
        margin-left: 10px;
        display: inline-block;
        color: #aaa;
        font-size: 10px;
      }
      .activeTitle div span {
        width: 17px;
        height: 13px;
        display: inline-block;
        background: #666;
        color: #fff;
        padding: 0;
        text-align: center;
        line-height: 13px;
        border-radius: 2px;
        margin: 0 3px;
      }
      .nextNav span,
      .nextNav span:last-child {
        margin-right: 10px;
      }
      .activeTitle div span:nth-of-type(1) {
        margin-left: 3px;
      }
      .activeTitle div i {
        color: #666;
      }
      .destination {
        border-top-width: 1px;
        margin-top: 6px;
        background: #fff;
      }
      .destination ul {
        overflow: hidden;
        padding: 9px 5px 0;
      }
      .destination ul li {
        float: left;
        width: 20%;
        padding: 0 4px;
        margin-bottom: 8px;
      }
      .destination ul li div {
        width: 100%;
        height: 25px;
        line-height: 25px;
        background: #f3f3f3;
        color: #3a3a3a;
        text-align: center;
        border-radius: 12px;
        font-size: 11px;
      }
      .prd-info {
        border: 1px solid #ddd;
        border-top: 0;
        padding: 2px 3px 4px;
        background: #fff;
      }
      .entrance,
      .nextNav {
        border-top-width: 1px;
      }
      .prd-info p {
        font-size: 12px;
        height: 32px;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 5px;
        color: #666;
        white-space: normal;
        display: -webkit-box;
      }
      .prd-info .prd-pri {
        overflow: hidden;
        height: 22px;
      }
      .prd-info .prd-pri span {
        float: left;
        color: #aaa;
        font-size: 11px;
      }
      .prd-info .prd-pri span:nth-of-type(1) {
        text-decoration: line-through;
        line-height: 25px;
      }
      .prd-info .prd-pri span:nth-of-type(2) {
        float: right;
        color: #d30775;
        font-size: 15px;
      }
      .prd-info .prd-pri span:nth-of-type(2) i {
        color: #d30775;
        font-size: 8px;
      }
      .prd-info .prd-pri span:nth-of-type(2) i:nth-of-type(2) {
        color: #aaa;
        font-size: 9px;
      }
      .limitGetMore {
        display: inline-block;
        width: 16px;
        color: #666;
        font-size: 12px;
        line-height: 15px;
        white-space: initial;
        position: relative;
        right: -18px;
        vertical-align: -webkit-baseline-middle;
      }
      .nextNav {
        display: none;
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        overflow-x: scroll;
        white-space: nowrap;
        background: #fff;
      }
      .banner,
      .bigIcon ul,
      .entrance div p:nth-of-type(2),
      .positionBtn,
      .pushDownMove,
      .smallIcon,
      .specialPrice,
      .specialPrice .specialPriceList {
        overflow: hidden;
      }
      .entrance div p:nth-of-type(2),
      .tablist .msg p.name_tit.lineTwo {
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        white-space: normal;
      }
      .nextNav span {
        padding: 4px 6px;
        border: 1px solid #aaa;
        border-radius: 4px;
        width: inherit;
      }
      .nextNav span.select {
        border: 1px solid #d30775;
        position: relative;
      }
      .nextNav span.select:after,
      .nextNav span.select:before {
        content: "";
        position: absolute;
        display: block;
      }
      .nextNav span.select:before {
        width: 0;
        height: 0;
        border-bottom: 10px solid red;
        border-left: 10px solid transparent;
        bottom: 0;
        right: 0;
      }
      .nextNav span.select:after {
        width: 2px;
        height: 5px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        bottom: 1px;
        right: 1px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
      }
      .more_recommend .plate ul ul,
      .pushDownMove > li:last-child,
      .smallIcon li:nth-of-type(n + 5) {
        border-bottom-width: 0;
      }
      .specialPrice {
        padding: 15px 10px;
        position: relative;
        z-index: 2;
        background: center #f8f8f8;
        background-size: 100% 100%;
      }
      .specialPrice .specialPriceList a {
        display: block;
        width: 48%;
        float: left;
        margin-right: 4%;
        text-align: center;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        height: 0;
        padding-bottom: 30.3%;
      }
      .specialPrice .specialPriceList a:last-child {
        margin-right: 0;
      }
      .specialPrice .getMoreSpecial {
        margin-top: 10px;
        color: #5dbbee;
        text-align: center;
        font-size: 14px;
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
      }
      .specialPrice .getMoreSpecial span {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-top: 1px solid #5dbbee;
        border-left: 1px solid #5dbbee;
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        vertical-align: middle;
      }
      .noProducts {
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        color: #ddd;
        text-align: center;
      }
      .tabChange {
        display: none;
      }
      #tab_con .tabChange {
        width: 100%;
        float: left;
        position: relative;
      }
      #tab_con .tabChange.tabMoving,
      .moveLeft {
        position: absolute;
        top: 0;
      }
      .moveLeft {
        left: 0;
        animation: move 0.5s;
        z-index: 500;
      }
      @keyframes move {
        0% {
          transform: translateX(0);
          display: block;
        }
        100% {
          transform: translateX(-100%);
          display: none;
        }
      }
      @-webkit-keyframes move {
        0% {
          -webkit-transform: translateX(0);
          display: block;
        }
        100% {
          -webkit-transform: translateX(-100%);
          display: none;
        }
      }
      .load {
        transition: all 0.6s;
        -webkit-transition: all 0.6s;
        opacity: 1 !important;
        transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
      }
      @keyframes move1 {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @-webkit-keyframes move1 {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @-moz-keyframes move1 {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @-o-keyframes move1 {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      .positionSure {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1200;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
      }
      #changeWrong div,
      .positionBomb {
        border-radius: 8px;
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: #f8f5f6;
        text-align: center;
      }
      .positionBomb {
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        width: 72.2%;
      }
      .positionBomb p {
        font-size: 16px;
        color: #000;
        margin: 17px 0;
        padding: 0 18px;
        line-height: 24px;
      }
      .positionBtn {
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 14px;
        color: #1e88fe;
      }
      .positionBtn span {
        display: block;
        float: left;
        width: 50%;
        height: 44px;
        border-top: 1px solid #dacec6;
        border-right: 1px solid #dacec6;
      }
      .positionBtn span:nth-of-type(2) {
        border-right: 0;
      }
      #cityChooseN {
        font-size: 14px;
        display: none;
      }
      #changeWrong {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1200;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
      }
      #changeWrong div {
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        width: 72.2%;
      }
      #changeWrong div p {
        font-size: 16px;
        color: #000;
        margin: 17px 0;
        padding: 0 18px;
        line-height: 24px;
      }
      #changeWrong div span {
        width: 56px;
        height: 30px;
        display: block;
        margin: 0 auto 15px;
        background: #d30775;
        line-height: 30px;
        color: #fff;
        font-size: 15px;
      }
      #cityChooseN,
      .opcityIn {
        position: fixed;
        height: 100%;
        top: 0;
        left: 0;
        width: 100%;
      }
      #cityChooseN.moveRight {
        transform: translateX(0);
        -webkit-transform: translateX(0);
      }
      #cityChooseN {
        z-index: 5;
        transform: translateX(101%);
        -webkit-transform: translateX(101%);
        transition: transform 0.6s;
        -webkit-transition: transform 0.6s;
      }
      .g-letter-list {
        z-index: 10;
      }
      .opcityIn {
        animation: fadeIn 1.5s forwards;
        -webkit-animation: fadeIn 1.5s forwards;
        background: rgba(225, 225, 225, 0.6);
        display: none;
      }
      .banner,
      .pushDownHide {
        height: 0;
      }
      @keyframes fadeIn {
        0%,
        100% {
          opacity: 0;
        }
        40% {
          opacity: 0.6;
        }
      }
      @-webkit-keyframes fadeIn {
        0%,
        100% {
          opacity: 0;
        }
        40% {
          opacity: 0.6;
        }
      }
      .pushDownMove {
        width: 100%;
        -webkit-transform-style: preserve-3d;
        -webkit-transform-origin: top;
        -webkit-transform: perspective(600px) rotateX(-90deg);
        transition: all 0.6s cubic-bezier(0.5, -0.5, 0.5, 1.5);
        -webkit-transition: all 0.6s cubic-bezier(0.5, -0.5, 0.5, 1.5);
      }
      .pushDownShow {
        transform: perspective(600px) rotateX(0);
        -webkit-transform: perspective(600px) rotateX(0);
      }
      .positionSwipe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }
      #mySwipe1 {
        width: 100%;
      }
      .banner {
        padding-bottom: 19.9677%;
      }
      .tablist .msg p.name_tit.lineTwo {
        max-height: 40px;
        line-height: 20px;
        -webkit-line-clamp: 2;
        display: -webkit-box;
      }
      .ball-beat {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        -webkit-transform: translate3d(-50%, -50%, 0);
      }
      .ball-beat > div {
        background-color: #d30775;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        margin: 2px;
        display: inline-block;
        -webkit-animation: ball-beat 0.7s 0s infinite linear;
        animation: ball-beat 0.7s 0s infinite linear;
      }
      .ball-beat > div:nth-child(2n-1) {
        -webkit-animation-delay: 0.35s !important;
        animation-delay: 0.35s !important;
      }
      @-webkit-keyframes ball-beat {
        50% {
          opacity: 0.2;
          -webkit-transform: scale(0.75);
          transform: scale(0.75);
        }
        100% {
          opacity: 1;
          -webkit-transform: scale(1);
          transform: scale(1);
        }
      }
      @keyframes ball-beat {
        50% {
          opacity: 0.2;
          -webkit-transform: scale(0.75);
          transform: scale(0.75);
        }
        100% {
          opacity: 1;
          -webkit-transform: scale(1);
          transform: scale(1);
        }
      }
      .navMove {
        animation: movetop 0.6s forwards;
        -webkit-animation: movetop 0.6s forwards;
      }
      @keyframes movetop {
        from {
          top: -44px;
        }
        to {
          top: 0;
        }
      }
      @-webkit-keyframes movetop {
        from {
          top: -44px;
        }
        to {
          top: 0;
        }
      }
      .bigIcon {
        padding: 0 3px 3px;
        font-size: 16px;
        color: #fff;
        background: #fafafa;
      }
      .bigIcon li,
      .bigIcon li:nth-of-type(3) {
        padding-left: 2px;
      }
      .bigIcon ul {
        margin-top: 3px;
      }
      .style_6 li a:nth-of-type(1),
      .style_7 li a:nth-of-type(1) {
        margin-top: 0;
      }
      .bigIcon li {
        float: left;
        width: 33.5%;
        text-align: center;
        position: relative;
        height: 100%;
      }
      .bigIcon li a {
        display: block;
        height: 4.31rem;
        width: 100%;
        line-height: 4.31rem;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .style_3 a i,
      .style_6 a i,
      .trifficTypes i {
        display: inline-block;
        vertical-align: middle;
      }
      .bigIcon li:first-child a {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }
      .bigIcon .style_6 li:first-child > div:first-child a {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 0;
      }
      .bigIcon .style_6 li:first-child > div:last-child a {
        border-bottom-left-radius: 5px;
        border-top-left-radius: 0;
      }
      .bigIcon li:last-child > div:first-child a:first-child {
        border-top-right-radius: 5px;
      }
      .bigIcon li:last-child > div:last-child a:first-child,
      .bigIcon li:last-child > div:last-child a:last-child {
        border-bottom-right-radius: 5px;
      }
      .bigIcon li:nth-of-type(1) {
        width: 33%;
        padding-left: 0;
      }
      .style_3 a i:nth-of-type(1),
      .style_6 a i:nth-of-type(1) {
        width: 36px;
        background-repeat: no-repeat;
        background-size: 100%;
        margin-right: 0.5rem;
      }
      .bigIcon li:nth-of-type(1) a span {
        top: 8px;
        left: 10px;
        position: absolute;
        line-height: normal;
      }
      .bigIcon .bg_color1 li a {
        background-color: #ec4c40;
      }
      .bigIcon .bg_color2 li a {
        background-color: #f8791c;
      }
      .bigIcon .bg_color3 li a {
        background-color: #7ec553;
      }
      .bigIcon .bg_color4 li a,
      .trifficTypes a {
        background-color: #5598dc;
      }
      .bigIcon .style_5 li:nth-of-type(1) a,
      .style_5 {
        height: 8.62rem;
      }
      .style_5 li:nth-of-type(1) a {
        height: 100%;
        position: relative;
      }
      .style_3 {
        height: 5.55rem;
      }
      .bigIcon .style_3 li a {
        height: 5.55rem;
        line-height: 5.55rem;
        position: relative;
      }
      .style_3 a i {
        line-height: 5.55rem;
      }
      .style_3 a i:nth-of-type(1) {
        height: 35px;
      }
      .style_7 {
        height: 13.06rem;
      }
      .bigIcon .style_7 li:nth-of-type(1) div:nth-of-type(1) a {
        height: 8.75rem;
        border-bottom-left-radius: 0;
      }
      .bigIcon .style_7 li:nth-of-type(1) div:nth-of-type(2) a {
        height: 4.31rem;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 0;
      }
      .bigIcon .style_7 li:nth-of-type(1) div:nth-of-type(1) a.sevenStyle {
        height: 13.06rem;
        border-bottom-left-radius: 5px;
      }
      .style_7 li a {
        height: 4.31rem;
      }
      .style_7 li:nth-of-type(1) a {
        height: 100%;
        position: relative;
      }
      .style_6 {
        height: 10.1rem;
      }
      .bigIcon .style_6 li:nth-of-type(1) a {
        height: 5.05rem;
      }
      .bigIcon .style_6 li:nth-of-type(1) div:nth-of-type(2) a {
        border-bottom-left-radius: 5px;
      }
      .style_6 li a {
        height: 5rem;
        position: relative;
      }
      .style_6 a i {
        line-height: 5rem;
      }
      .style_6 a i:nth-of-type(1) {
        height: 35px;
      }
      .trifficTypes {
        height: 5rem;
        font-size: 0;
      }
      .trifficTypes li a {
        height: 100%;
        line-height: 5rem;
      }
      .trifficTypes i {
        font-size: 14px;
        line-height: 5rem;
      }
      .trifficTypes i:first-child {
        width: 37px;
        height: 36px;
        margin-right: 10px;
      }
      .bigIconActive {
        animation: avtive1 0.25s ease-out;
        -webkit-animation: avtive1 0.25s ease-out;
      }
      @keyframes avtive1 {
        60% {
          -webkit-transform: scale3d(0.95, 0.95, 1);
          transform: scale3d(0.95, 0.95, 1);
        }
        85% {
          -webkit-transform: scale3d(1.05, 1.05, 1);
          transform: scale3d(1.05, 1.05, 1);
        }
        100% {
          -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
        }
      }
      @-webkit-keyframes avtive1 {
        60% {
          -webkit-transform: scale3d(0.95, 0.95, 1);
          transform: scale3d(0.95, 0.95, 1);
        }
        85% {
          -webkit-transform: scale3d(1.05, 1.05, 1);
          transform: scale3d(1.05, 1.05, 1);
        }
        100% {
          -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
        }
      }
      .smallIcon {
        background: #fff;
        font-size: 11px;
        line-height: 11px;
      }
      .smallIcon li {
        float: left;
        width: 25%;
        text-align: center;
        margin: 3px 0 12px;
      }
      .smallIcon li:nth-of-type(4n + 1) div {
        padding: 0 3px;
      }
      .smallIcon li:nth-of-type(4n) {
        border-right-width: 0;
        padding: 0 3px;
      }
      .smallIcon span {
        display: block;
        width: 100%;
      }
      .smallIcon .sIcon {
        width: 41px;
        height: 41px;
        background-color: #fb8144;
        margin: 9px auto 6px;
        position: relative;
        background-size: 41px 41px;
        background-repeat: no-repeat;
        border-radius: 18px;
      }
      .smallIcon .sIcon i {
        position: absolute;
        height: 13px;
        border-radius: 13px;
        background: #e5213f;
        font-size: 8px;
        top: -6px;
        right: -14px;
        color: #fff;
        padding: 0 3px;
        line-height: 12px;
        border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
      }
      .smallIcon li:nth-of-type(2) .sIcon {
        background-color: #69d129;
      }
      .smallIcon li:nth-of-type(3) .sIcon {
        background-color: #0ecc5f;
      }
      .smallIcon li:nth-of-type(4) .sIcon {
        background-color: #ffb32e;
      }
      .smallIcon li:nth-of-type(5) .sIcon {
        background-color: #ffaf23;
      }
      .smallIcon li:nth-of-type(6) .sIcon {
        background-color: #fb5c85;
      }
      .smallIcon li:nth-of-type(7) .sIcon {
        background-color: #b97ae9;
      }
      .smallIcon li:nth-of-type(8) .sIcon {
        background-color: #5c9ffb;
      }
      .entrance {
        height: 52px;
        position: relative;
        background: #fff;
      }
      .entrance span {
        width: 48px;
        height: 49px;
        position: absolute;
        top: 50%;
        left: 13px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        background-repeat: no-repeat;
        background-size: 48px 49px;
      }
      .entrance i {
        display: block;
        width: 12px;
        height: 12px;
        position: absolute;
        top: 50%;
        right: 13px;
        transform: translateY(-50%) rotate(135deg);
        -webkit-transform: translateY(-50%) rotate(135deg);
        border-top: 1px solid #565a5c;
        border-left: 1px solid #565a5c;
      }
      .entrance div {
        padding: 11px 22px 11px 67px;
      }
      .entrance div p {
        width: 100%;
        font-size: 10px;
        color: #aaa;
        line-height: 10px;
      }
      .entrance div p:nth-of-type(2) {
        font-size: 12px;
        color: #666;
        margin-top: 6px;
        line-height: 14px;
        -webkit-line-clamp: 1;
        display: -webkit-box;
      }
      .cus-bg a,
      .cus-tip {
        text-align: center;
        color: #fff;
      }
      .openBomb {
        position: fixed;
        width: 100%;
        display: none;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 111111;
      }
      .openBomb .openBombBox {
        width: 100%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        padding: 0 40px;
      }
      .openBomb.active a img {
        animation: openBomb 0.7s forwards;
        -webkit-animation: openBomb 0.7s forwards;
        max-width: 414px;
        margin: 0 auto;
      }
      .closeBomb {
        position: absolute;
        width: 32px;
        height: 32px;
        top: -40px;
        right: 24px;
        background: #fff;
        border-radius: 100%;
      }
      .closeBomb:after,
      .closeBomb:before {
        content: "";
        display: block;
        width: 20px;
        height: 3px;
        border-radius: 1px;
        background: #d30775;
        top: 15px;
        left: 6px;
        position: absolute;
      }
      .closeBomb:before {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
      }
      .closeBomb:after {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
      }
      @keyframes openBomb {
        0% {
          -webkit-transform: scale(0.2);
          transform: scale(0.2);
        }
        100% {
          -webkit-transform: scale(1);
          transform: scale(1);
        }
      }
      @-webkit-keyframes openBomb {
        0% {
          -webkit-transform: scale(0.2);
          transform: scale(0.2);
        }
        100% {
          -webkit-transform: scale(1);
          transform: scale(1);
        }
      }
      @media screen and (max-device-width: 320px) {
        .style_3 a i:nth-of-type(1) {
          width: 30px !important;
          height: 30px !important;
          margin-right: 4px !important;
        }
        .bigIcon {
          font-size: 14px !important;
        }
      }
      #bootArea {
        display: none;
        visibility: hidden;
      }
      .ballpre {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;
        background: #fff;
      }
      .style_3 .stage {
        margin-top: 0;
      }
      @keyframes moveDown {
        0%,
        100%,
        90% {
          transform: rotateX(0);
          -webkit-transform: rotateX(0);
        }
        19%,
        20%,
        80% {
          transform: rotateX(-90deg);
          -webkit-transform: rotateX(-90deg);
        }
      }
      @-webkit-keyframes moveDown {
        0%,
        100%,
        90% {
          transform: rotateX(0);
          -webkit-transform: rotateX(0);
        }
        19%,
        20%,
        80% {
          transform: rotateX(-90deg);
          -webkit-transform: rotateX(-90deg);
        }
      }
      .abTestMove {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        animation: moveDown 5.5s cubic-bezier(0.5, -0.5, 0.5, 1.5);
        -webkit-animation: moveDown 5.5s cubic-bezier(0.5, -0.5, 0.5, 1.5);
      }
      .bigIcon li > div {
        margin-top: 0.1rem;
      }
      .bigIcon li > div:nth-of-type(1) {
        margin-top: 0;
      }
      .stage {
        width: 100%;
        height: 4.31rem;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
      }
      .style_3 .stage,
      .style_3 .stage a {
        height: 5.55rem;
      }
      .style_6 .stage,
      .style_6 .stage a {
        height: 5rem;
      }
      .style_5 li:nth-of-type(1) .stage {
        height: 8.62rem;
      }
      .style_5 li .stage a {
        height: 4.31rem;
      }
      .style_5 li:nth-of-type(1) .stage a {
        height: 8.62rem;
      }
      .style_7 li:nth-of-type(1) .stage,
      .style_7 li:nth-of-type(1) .stage a {
        height: 13.06rem;
      }
      .style_7 li .stage a {
        height: 4.31rem;
      }
      .style_3 .stage a:nth-child(1) {
        transform: translateZ(2.77rem);
        -webkit-transform: translateZ(2.77rem);
      }
      .style_3 .stage a:nth-child(2) {
        transform: rotateX(90deg) translateZ(2.77rem);
        -webkit-transform: rotateX(90deg) translateZ(2.77rem);
      }
      .style_6 .stage a:nth-child(1) {
        transform: translateZ(2.5rem);
        -webkit-transform: translateZ(2.5rem);
      }
      .style_6 .stage a:nth-child(2) {
        transform: rotateX(90deg) translateZ(2.5rem);
        -webkit-transform: rotateX(90deg) translateZ(2.5rem);
      }
      .style_5 li:nth-of-type(1) .stage a:nth-child(1) {
        transform: translateZ(4.31rem);
        -webkit-transform: translateZ(4.31rem);
      }
      .style_5 li:nth-of-type(1) .stage a:nth-child(2) {
        transform: rotateX(90deg) translateZ(4.31rem);
        -webkit-transform: rotateX(90deg) translateZ(4.31rem);
      }
      .style_7 li:nth-of-type(1) .stage a:nth-child(1) {
        transform: translateZ(6.53rem);
        -webkit-transform: translateZ(6.53rem);
      }
      .style_7 li:nth-of-type(1) .stage a:nth-child(2) {
        transform: rotateX(90deg) translateZ(6.53rem);
        -webkit-transform: rotateX(90deg) translateZ(6.53rem);
      }
      .customService {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        padding: 0 30px;
      }
      .cus-bg,
      .cus-img {
        position: relative;
      }
      .cus-bg {
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        background: #fff;
        padding: 15px 10px;
        border-radius: 3px;
      }
      .cus-tip {
        position: absolute;
        width: 142px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        background: #74beff;
        border-radius: 24px;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
      }
      .cus-bg a,
      .zbtl_880 {
        display: block;
        width: 100%;
      }
      .cus-bg a {
        height: 45px;
        line-height: 45px;
        background: #d30775;
        border-radius: 5px;
        font-size: 14px;
      }
      .cusconsult {
        margin-top: 21px;
      }
      .cus-bg a.telconsult {
        margin-top: 10px;
        background: #ff720e;
      }
      .zbtl_880 {
        height: 0;
        padding-bottom: 26.57%;
      }
    </style>
    <script type="text/javascript">
      (function(doc, win) {
        var docEl = doc.documentElement,
          resizeEvt =
            "orientationchange" in window ? "orientationchange" : "resize",
          recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (clientWidth > 640) clientWidth = 640;
            docEl.style.fontSize = 10 * (clientWidth / 320) + "px";
            if (
              typeof swiperHtml1 != undefined &&
              typeof swiperHtml1 != "undefined" &&
              swiperHtml1 != ""
            ) {
              document.getElementById("mySwipe1").innerHTML = swiperHtml1;
              swiperInit("#mySwipe1", 1, true, 3000);
            }
          };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);
    </script>
  </head>
  <body class="homeptop">
    <div id="content">
      <section class="index">
        <div class="bigIcon">
          <ul class="style_5 bg_color1">
            <li>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="A-1-景点门票"
                  href="javascript:void(0);"
                  style="background-image: url(./images/ticket.png)"
                ></a>
              </div>
            </li>
            <li>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="A-2-境外门票"
                  href="javascript:void(0);"
                  >境外门票</a
                >
              </div>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="A-3-王牌景区"
                  href="javascript:void(0);"
                  >王牌景区</a
                >
              </div>
            </li>
            <li>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="A-4-境外玩乐"
                  href="javascript:void(0);"
                  >境外玩乐</a
                >
              </div>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="A-5-国内玩乐"
                  href="javascript:void(0);"
                  >国内玩乐</a
                >
              </div>
            </li>
          </ul>
          <ul class="style_3 bg_color2">
            <li>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="B-1-酒店"
                  href="javascript:void(0);"
                  style="background-image: url(./images/hotel.png)"
                ></a>
              </div>
            </li>
            <li>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="B-2-酒+景"
                  href="javascript:void(0);"
                >
                  酒+景
                </a>
              </div>
            </li>
            <li>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="B-3-机+酒"
                  href="javascript:void(0);"
                >
                  机+酒
                </a>
              </div>
            </li>
          </ul>
          <ul class="style_7 bg_color3">
            <li>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="C-1-特卖会"
                  href="javascript:void(0);"
                  style="background-image: url(./images/sale.png)"
                ></a>
              </div>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="C-2-跟团游"
                  href="javascript:void(0);"
                  >跟团游</a
                >
              </div>
            </li>
            <li>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="C-3-国内游"
                  href="javascript:void(0);"
                  >国内游</a
                >
              </div>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="C-4-出境游"
                  href="javascript:void(0);"
                  >出境游</a
                >
              </div>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="C-5-驴悦亲子"
                  href="javascript:void(0);"
                  >驴悦亲子</a
                >
              </div>
            </li>
            <li>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="C-6-周边游"
                  href="javascript:void(0);"
                  >周边游</a
                >
              </div>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="C-7-邮轮"
                  href="javascript:void(0);"
                  >邮轮</a
                >
              </div>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="C-8-开心驴行"
                  href="javascript:void(0);"
                  >开心驴行</a
                >
              </div>
            </li>
          </ul>
          <ul class="style_3 bg_color4">
            <li>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="D-1-火车票"
                  href="javascript:void(0);"
                >
                  <i style="background-image: url(./images/train.png)"></i
                  ><i>火车票</i>
                </a>
              </div>
            </li>
            <li>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="D-2-国内机票"
                  href="javascript:void(0);"
                >
                  <i style="background-image: url(./images/plane.png)"></i
                  ><i>国内机票</i>
                </a>
              </div>
            </li>
            <li>
              <div>
                <a
                  class="cmAddClick"
                  data-cm="D-3-国际机票"
                  href="javascript:void(0);"
                >
                  <i
                    style="background-image: url(./images/internation-plane.png)"
                  ></i
                  ><i>国际机票</i>
                </a>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <button id="sendFetch">发送一条请求</button>
      <button id="sendMsg">发送一条通知</button>
      <button id="share">调用原生分享</button>
      <footer class="offline">
        你正处于离线状态<sub>但你仍然可以浏览之前访问过的页面</sub>
      </footer>
    </div>
    <script src="./scripts/demo.js"></script>
  </body>
</html>
